.zero .open {
  width: 50%;
  height: 50px;
  margin: 0 auto;
  border: 1px solid #fff;
  border-radius: 10px;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
}
.page_01 {
  width: 100%;
  position: relative;
}
.page_01 .top {
  width: 100%;
  height: 44px;
  background-color: #023561;
  border-top: 2px solid #023E70;
  border-bottom: 2px solid #023E70;
  position: relative;
  margin-bottom: 23px;
}
.page_01 .top h3 {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 44px;
  font-size: 20px;
  color: #148fed;
}
.page_01 .top span {
  position: absolute;
  width: 11px;
  height: 17px;
  top: 13px;
  left: 15px;
  background-image: url(../images/rank/b_arrow.png);
  background-position: center center;
  background-size: cover;
}
.page_01 .big_book {
  width: 45%;
  height: 30%;
  position: absolute;
  color: #fff;
  left: 26%;
  margin-bottom: 8px;
}
.page_01 .big_book .polygon {
  position: absolute;
  width: 100%;
}
.page_01 .big_book .bigbook {
  position: absolute;
  width: 58%;
  left: 49%;
  top: 20px;
  -webkit-transform: translate(-50%);
}
.page_01 .big_book .txt_cirle {
  position: absolute;
  bottom: 18px;
  left: 50%;
  -webkit-transform: translate(-50%);
  color: #fff;
  font-size: 0.18rem;
}
.page_01 .big_book .txt_cirle .cirle {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-image: url(../images/rank/circle.png);
  background-position: center center;
  background-size: 20px 20px;
  text-align: center;
  line-height: 20px;
}
.page_01 .text {
  position: absolute;
  text-align: center;
  color: #fff;
  font-family: 'MyriadPro Regular';
  top: 40%;
  left: 50%;
  -webkit-transform: translate(-50%);
  margin-bottom: 10px;
}
.page_01 .text p:nth-of-type(1) {
  font-size: 20px;
}
.page_01 .text p:nth-of-type(2) {
  font-size: 18px;
  line-height: 30px;
}
.page_01 .text p:nth-of-type(3) {
  font-size: 18px;
}
.page_01 .small2 {
  width: 30%;
  height: 20%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%);
}
.page_01 .small3 {
  width: 25%;
  height: 18%;
  left: 63%;
  top: 40%;
}
.page_01 .small4 {
  width: 23%;
  height: 16%;
  left: 6%;
  top: 40%;
}
.page_01 .small5 {
  width: 20%;
  height: 16%;
  left: 63%;
  top: 56%;
}
.page_01 .small6 {
  width: 22%;
  height: 16%;
  left: 7%;
  top: 56%;
}
.two {
  width: 100%;
  height: 100%;
  position: relative;
}
.two .outer {
  width: 90%;
  height: 30%;
  margin: 10px 0;
  margin-left: 15px;
  border: 2px solid #036AC0;
  position: relative;
}
.two .outer .inner {
  width: 100%;
  height: 100%;
  margin-left: 10px;
  margin-top: 12px;
  border: 2px solid #036AC0;
  position: absolute;
}
.two .outer img {
  position: absolute;
  top: 10px;
  left: 6px;
}
.two .pernum {
  position: relative;
  margin-top: 25px;
  display: flex;
  justify-content: space-around;
  color: #fff;
  margin-bottom: 10px;
}
.two .pernum .numone,
.two .pernum .numtwo,
.two .pernum .numthree {
  margin: 0 45px;
  width: 15px;
  height: 160px;
  background-color: #192C5C;
  border-radius: 6px;
  position: relative;
}
.two .pernum .numone .count1,
.two .pernum .numtwo .count1,
.two .pernum .numthree .count1,
.two .pernum .numone .count2,
.two .pernum .numtwo .count2,
.two .pernum .numthree .count2,
.two .pernum .numone .count3,
.two .pernum .numtwo .count3,
.two .pernum .numthree .count3 {
  position: absolute;
  z-index: 999;
}
.two .pernum .numone .bar1,
.two .pernum .numtwo .bar1,
.two .pernum .numthree .bar1,
.two .pernum .numone .bar2,
.two .pernum .numtwo .bar2,
.two .pernum .numthree .bar2,
.two .pernum .numone .bar3,
.two .pernum .numtwo .bar3,
.two .pernum .numthree .bar3 {
  position: absolute;
  z-index: 888;
  width: 15px;
  height: 20px;
  border-radius: 6px;
  background-color: pink;
  bottom: 0;
  left: 0;
}
.two .pernum .numone .count1,
.two .pernum .numtwo .count1,
.two .pernum .numthree .count1,
.two .pernum .numone .count2,
.two .pernum .numtwo .count2,
.two .pernum .numthree .count2 {
  width: 76px;
  height: 45px;
  line-height: 30px;
  text-align: center;
  background: url(../images/count/striangle.png);
  background-size: 76px 45px;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%);
}
.two .pernum .numone .count3,
.two .pernum .numtwo .count3,
.two .pernum .numthree .count3 {
  width: 95px;
  height: 45px;
  line-height: 30px;
  text-align: center;
  background: url(../images/count/striangle.png);
  background-size: 95px 45px;
  top: 20px;
  left: 50%;
  -webkit-transform: translate(-50%);
}
.two .des {
  display: flex;
  justify-content: space-around;
  text-align: center;
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 20px;
}
.two .totalPer {
  color: #fff;
  font-size: 18px;
}
.two .totalPer p {
  margin-left: 30px;
}
.two .totalPer .box {
  width: 100%;
  padding: 0 20px;
  margin-top: 10px;
}
.two .totalPer .box .rectangle_bg {
  width: 100%;
  height: 30px;
  position: relative;
  background-color: #192C5C;
  border-radius: 8px;
}
.two .totalPer .box .rectangle_bg .rectangle {
  height: 100%;
  width: 100px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 15px;
  padding-left: 10px;
  background: url(../images/count/rectangle.png);
}
.three .borders {
  width: 80%;
  height: 80px;
  border: 1px solid #099D94;
  margin: 0 auto;
  position: relative;
}
.three .borders .innerborder {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 8px;
  left: 8px;
  border: 1px solid #099D94;
  text-align: center;
  line-height: 80px;
  color: #fff;
  font-size: 16px;
}
.three .bbox {
  margin-top: 50px;
}
.three .bbox .borrow li {
  float: left;
  width: 50%;
  height: 100px;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  position: relative;
}
.three .bbox .borrow li span:nth-of-type(1) {
  font-size: 24px;
  color: #C6E421;
}
.three .bbox .borrow li span:nth-of-type(2) {
  color: #C6E421;
}
.three .bbox .borrow li img {
  position: absolute;
  width: 5%;
}
.three .bbox .borrow li .ltop {
  top: 0;
  left: 40px;
}
.three .bbox .borrow li .lbottom {
  top: 64px;
  left: 40px;
}
.three .bbox .borrow li .rtop {
  top: 0;
  right: 40px;
}
.three .bbox .borrow li .rbottom {
  top: 64px;
  right: 40px;
}
.four .banner_bg1 {
  margin: 4vw auto;
  width: 76%;
  height: 63%;
  background: url(../images/recommend/banner_bg.png);
  background-repeat: round;
}
.four .banner_bg1 .bg_pic {
  width: 80%;
}
